<template>
  <a-col :span="24" class="fourCard-com">
    <a-row :gutter="[16, 16]">
      <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
        <a-card :bordered="false">
          <div class="title">
            <a-statistic title="用户统计" :value="1165">
              <template #prefix>
                <UserOutlined class="prefix" />
              </template>
            </a-statistic>
            <a-button type="text">
              <InfoCircleOutlined class="icon" />
            </a-button>
          </div>
          <div class="context">
            <div style="width: 100%">
              周同比 12% <CaretUpOutlined style="color: #f5222d" />
            </div>
            <div style="width: 100%">
              日同比 11% <CaretDownOutlined style="color: #52c41a" />
            </div>
          </div>
          <a-divider class="divider-line" />
          <div class="end">日用户统计 <span class="num">102</span></div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
        <a-card :bordered="false">
          <div class="title">
            <a-statistic title="任务统计" :value="75328">
              <template #prefix>
                <ShoppingCartOutlined class="prefix" />
              </template>
            </a-statistic>
            <a-button type="text">
              <InfoCircleOutlined class="icon" />
            </a-button>
          </div>
          <div class="context">
            <canvas id="two"></canvas>
          </div>
          <a-divider class="divider-line" />
          <div class="end">日任务统计 <span class="num">6256</span></div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
        <a-card :bordered="false">
          <div class="title">
            <a-statistic title="反馈统计" :value="1918">
              <template #prefix>
                <TeamOutlined class="prefix" />
              </template>
            </a-statistic>
            <a-button type="text">
              <InfoCircleOutlined class="icon" />
            </a-button>
          </div>
          <div class="context">
            <canvas id="three"></canvas>
          </div>
          <a-divider class="divider-line" />
          <div class="end">日反馈统计 <span class="num">697</span></div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
        <a-card :bordered="false">
          <div class="title">
            <a-statistic title="数据分析" :value="814">
              <template #prefix>
                <ConsoleSqlOutlined class="prefix" />
              </template>
            </a-statistic>
            <a-button type="text">
              <InfoCircleOutlined class="icon" />
            </a-button>
          </div>
          <div class="context">
            <canvas id="four"></canvas>
          </div>
          <a-divider class="divider-line" />
          <div class="end">日数据分析 <span class="num">233</span></div>
        </a-card>
      </a-col>
    </a-row>
  </a-col>
</template>
<script>
import {
  InfoCircleOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
  DoubleRightOutlined,
  UserOutlined,
  ShoppingCartOutlined,
  TeamOutlined,
  ConsoleSqlOutlined,
  CaretUpOutlined,
  CaretDownOutlined,
} from "@ant-design/icons-vue";

import * as echarts from "echarts/core";
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DatasetComponent,
} from "echarts/components";
import { LineChart, BarChart, GraphChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

export default {
  name: "",
  components: {
    InfoCircleOutlined,
    ArrowUpOutlined,
    ArrowDownOutlined,
    DoubleRightOutlined,
    UserOutlined,
    ShoppingCartOutlined,
    TeamOutlined,
    ConsoleSqlOutlined,
    CaretUpOutlined,
    CaretDownOutlined,
  },
  mixins: [],
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  mounted() {
    echarts.use([
      TitleComponent,
      ToolboxComponent,
      TooltipComponent,
      GridComponent,
      LegendComponent,
      LineChart,
      CanvasRenderer,
      UniversalTransition,
      DatasetComponent,
      BarChart,
      GraphChart,
    ]);
    this.two();
    this.three();
    this.four();
  },
  methods: {
    four() {
      var chartDom = document.getElementById("four");
      var myChart = echarts.init(chartDom);
      var option;

      const axisData = [
        "Mon",
        "Tue",
        "Wed",
        "Very Loooong Thu",
        "Fri",
        "Sat",
        "Sun",
      ];
      const data = axisData.map(function (item, i) {
        return Math.round(Math.random() * 1000 * (i + 1));
      });
      const links = data.map(function (item, i) {
        return {
          source: i,
          target: i + 1,
        };
      });
      links.pop();
      option = {
        height: 40,
        title: {
          text: "Graph on Cartesian",
        },
        tooltip: {},
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: axisData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "graph",
            layout: "none",
            coordinateSystem: "cartesian2d",
            symbolSize: 40,
            label: {
              show: true,
            },
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],
            data: data,
            links: links,
            lineStyle: {
              color: "#2f4554",
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    three() {
      var chartDom = document.getElementById("three");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        height: 40,
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ["product", "2015", "2016", "2017"],
            ["Matcha Latte", 43.3, 85.8, 93.7],
            ["Milk Tea", 83.1, 73.4, 55.1],
            ["Cheese Cocoa", 86.4, 65.2, 82.5],
            ["Walnut Brownie", 72.4, 53.9, 39.1],
          ],
        },
        xAxis: { type: "category" },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
      };

      option && myChart.setOption(option);
    },
    two() {
      var chartDom = document.getElementById("two");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        height: 60,
        color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "Line 1",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(128, 255, 165)",
                },
                {
                  offset: 1,
                  color: "rgb(1, 191, 236)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [140, 232, 101, 264, 90, 340, 250],
          },
          {
            name: "Line 2",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(0, 221, 255)",
                },
                {
                  offset: 1,
                  color: "rgb(77, 119, 255)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [120, 282, 111, 234, 220, 340, 310],
          },
          {
            name: "Line 3",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(55, 162, 255)",
                },
                {
                  offset: 1,
                  color: "rgb(116, 21, 219)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [320, 132, 201, 334, 190, 130, 220],
          },
          {
            name: "Line 4",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(255, 0, 135)",
                },
                {
                  offset: 1,
                  color: "rgb(135, 0, 157)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [220, 402, 231, 134, 190, 230, 120],
          },
          {
            name: "Line 5",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            label: {
              show: true,
              position: "top",
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(255, 191, 0)",
                },
                {
                  offset: 1,
                  color: "rgb(224, 62, 76)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [220, 302, 181, 234, 210, 290, 150],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>
<style lang='scss' scoped>
.fourCard-com {
  overflow: hidden;
  :deep(.ant-card-body) {
    padding: 18px 24px;
  }
  .title {
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
    .prefix {
      margin-right: 10px;
    }
    .icon {
      margin-top: 5px;
      font-size: 16px;
    }
  }
  .divider-line {
    margin: 12px 0;
  }
  .end .num {
    margin-left: 10px;
  }
  .context {
    height: 60px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
  }
}
</style>